<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/mystyle.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1885423_q3s4kmfzgs.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="nav-header">
        <div class="site-topbar">
            <div class="topbar-nav">
                <a href="https://www.mi.com/index.html">小米商城</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">米聊</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">游戏</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">多看阅读</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">云服务</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">小米网移动版</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">Select region</a>
                <span class="sep">|</span>
                <a href="//www.miui.com/" target="_blank">米粉节答疑</a>
            </div>
            <div class="topbar-info">
                <a href="javascript:void(0);" target="_blank">注册</a>
                    <span class="sep">|</span>
                <a href="javascript:void(0);" target="_blank">登录</a>
            </div>
        </div>
    </div>
    <div class="header">
        <img src="images/logo.png" alt="">
        <div class="header-right">
            <div class="time"><img src="images/clock.png" alt="">&nbsp&nbsp4月14日开放购买</div>
            <div class="searchpart">
                <div class="search-box">
                    <input type="text" value="搜索您需要的商品">
                    <button class="search"><img src="images/fangdajing.png" alt=""></button>
                    <button class="shopcar"><div class="shopcarimg">
                        <img src="images/shopcar.png" alt="">
                    </div><div class="shopcartxt">购物车</div></button>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="connav">
            <ul>
                <li class="li-all"><a href="" class="all">全部商品分类</a></li>
                <li class="li-other"><a href="">首页</a></li>
                <li class="li-other"><a href="">小米手机</a></li>
                <li class="li-other"><a href="" >红米</a></li>
                <li class="li-other"><a href="">小米平板</a></li>
                <li class="li-other"><a href="">小米电视</a></li>
                <li class="li-other"><a href="">盒子</a></li>
                <li class="li-other"><a href="">路由器</a></li>
                <li class="li-other"><a href="">合约机</a></li>
                <li class="li-other"><a href="">服务</a></li>
                <li class="li-other"><a href="">社区</a></li>
            </ul>
        </div>
        <div class="navcontent">
            <div class="nc-left">
                <div class="nc-left-content">
                    <div class="up">购买手机</div>
                    <div class="down"><a href="#">小米Noto</a><a href="#">小米4</a><a href="#">红米</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">购买电视与平板</div>
                    <div class="down"><a href="#">小米电视</a><a href="#">小米盒子</a><a href="#">小米平板</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">路由器与智能硬件</div>
                    <div class="down"><a href="#">路由器</a><a href="#">体重秤</a><a href="#">净化器与滤芯</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">插线板、移动电源与电池</div>
                    <div class="down"><a href="#">小米移动电源</a><a href="#">电池</a><a href="#">充电器</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">耳机音响与存储卡</div>
                    <div class="down"><a href="#">小米头戴式耳机</a><a href="#">小米活塞耳机</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">保护套与贴膜</div>
                    <div class="down"><a href="#">保护套/保护壳</a><a href="#">贴膜</a><a href="#">防尘塞</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">后盖与个性化配件</div>
                    <div class="down"><a href="#">米键</a><a href="#">后盖</a><a href="#">贴纸</a><a href="#">手机支架</a></div>
                </div>
                <div class="nc-left-content">
                    <div class="up">小米生活方式</div>
                    <div class="down"><a href="#">服装</a><a href="#">米兔</a><a href="#">背包</a><a href="">生活周边</a></div>
                </div>
            </div>
            <div class="nc-right">
                <div class="lunbo">
                    <div id="list">
                        <img src="images/banner3.png" alt="">
                        <img src="images/banner2.png" alt="">
                        <img src="images/banner5.png" alt="">
                        <img src="images/banner4.png" alt="">
                        <img src="images/banner1.png" alt="">
                    </div>
                    <div id="btns">
                        <span class="current"><div class="number1">1</div></span>
                        <span><div class="number">2</div></span>
                        <span><div class="number">3</div></span>
                        <span><div class="number">4</div></span>
                        <span><div class="number">5</div></span>
                    </div>
                </div>
                <div class="nc-right-bootm">
                    <div class="nc-adv1"><img src="images/01.png" alt=""></div>
                    <div class="nc-adv"><img src="images/02.png" alt=""></div>
                    <div class="nc-adv"><img src="images/03.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="commodity">
            <div class="mxdp">
                <div class="commo-header">
                    <div class="title">小米明星单品<div class="kind">根据机型选配件</div></div>
                    <div class="jiantou">
                        <a href="" class="left"><img src="images/05.png" alt=""></a>
                        <a href="" class="right"><img src="images/06.png" alt=""></a>
                    </div>
                </div>
                <div class="commo-content">
                    <div class="commoback">
                        <img src="images/chatou.jpg" alt="">
                        <div class="commoname">小米智能插座</div>
                        <div class="commointro">让普通家电变得智能</div>
                    </div>
                    <div class="commoback">
                        <img src="images/jinghuaqi.jpg" alt="">
                        <div class="commoname">小米空气净化器</div>
                        <div class="commointro">高性能智能空气净化器立即预约</div>
                    </div>
                    <div class="commoback">
                        <img src="images/huosaierji.jpg" alt="">
                        <div class="commoname">小米活塞耳机简装版</div>
                        <div class="commointro">好声音源自活塞式音腔，延续经典设计</div>
                    </div>
                    <div class="last">
                    <img src="images/aa.jpg" alt="">
                        <div class="commoname">小米路由器</div>
                        <div class="commointro">顶级双屏幕AC智能路由器，内置1TB大硬盘</div>
                    </div>
                </div>
            </div>
            <div class="xpsj">
                <div class="commo-header">
                    <div class="title">新品上架</div>
                    <a class="more">更多></a>
                </div>
                <div class="commo-content2">
                    <div class="xp-left">
                        <div class="left-top">
                            <a class="yinxiang"><img src="images/fanghezi0407xiao.jpg" alt=""></a>
                            <a class="shouhuan">
                                <div class="price">小米手环<br>79元</div>
                                <img src="images/shouhuan.jpg" alt="">
                            </a>
                        </div>
                        <div class="left-middle">
                            <div class="middle-double">
                                <div class="double-top">
                                    <div class="price">5周年米兔钥匙扣<br>9.9元</div>
                                    <img src="images/yaoshi.png" alt="">      
                                </div>
                                <a class="double-bottom">
                                    <div class="price">QCY派Q8蓝牙耳机<br>59.9元</div>
                                    <img src="images/lanyaerji.png" alt="">      
                                </a>
                            </div>
                            <a class="middle-tshirt">
                                <div class="price">小米T恤路标MILOGO<br>39元</div>
                                <img src="images/t-shirt.jpg" alt="" class="tshirt">
                            </a>
                            <a class="middle-last">
                                <div class="price">小米4实木后盖<br>69元</div>
                                <img src="images/shimuke.jpg" alt="" class="shimuke">
                            </a>     
                        </div>
                        <div class="left-bottom">
                            <a class="baohuke">
                                <div class="price">小米Note超薄保护壳<br>49元</div>
                                <img src="images/baohuke.png" alt="" class="bhk">
                            </a>
                            <a class="zipaigan">
                                <div class="price">小米自拍杆<br>49元</div>
                                <img src="images/zipaigan.jpg" alt="" class="zpg">
                            </a>
                            <a class="ruererji">
                                <div class="price">先锋CL31系列入耳式耳机<br>99元</div>
                                <img src="images/erji.jpg" alt="" class="ej">
                            </a>
                        </div>
                    </div>
                    <div class="xp-right">
                        <div class="right01">            
                            <div class="tejia">特价商品</div>
                            <a href="#">
                                <div class="intro">
                                    <div class="name">SanDisk32GB存储卡</div>
                                    <div><div class="teprice">79元</div><s>109元</s></div>
                                    <div class="intro-other">还有更多特价商品</div>
                                </div> 
                                <img src="images/neicunka.jpg" alt="">
                            </a>         
                        </div>
                        <div class="right02">
                            <a href="">
                                <div class="intro">
                                    <div class="name">特惠配件套餐</div>
                                    <div class="intro-other">手机必备配件组合购买<br>实惠更优惠</div>     
                                </div>  
                                <img src="images/channel-list-cool.jpg" alt="">
                            </a>                           
                        </div>    
                        <div class="right03">
                            <a href="">
                                <div class="intro">
                                    <div class="name">我爱酷玩</div>
                                    <div class="intro-other">邂逅炫酷的电子产品<br>结交趣味相投的朋友</div>     
                                </div>  
                                <img src="images/channel-list-new.jpg" alt="">
                            </a>                          
                        </div>                                             
                        <div class="right04">
                            <div class="choose">
                                <ul>
                                    <li><a href="" class="text">企业用户采购通道</a><a href="" class="enter">></a></li>
                                    <li><a href="" class="text">小米手机防伪查询</a><a href="" class="enter">></a></li>
                                    <li><a href="" class="text">小米手机官翻版</a><a href="" class="enter">></a></li>
                                    <li><a href="" class="text">小米手机路由器官翻版</a><a href="" class="enter">></a></li>
                                    <li><a href="" class="text">米粉红包</a><a href="" class="enter">></a></li>
                                </ul>
                            </div>
                            <div class="chongzhi">
                                <div class="huafei">话费充值</div>
                                <input type="text" value="请输入手机号">
                                <select>
                                    <option value="">10元</option>
                                    <option value="">20元</option>
                                    <option value="">50元</option>
                                    <option value="" selected>100元</option>
                                </select>
                                <div class="shifu">实付价格98.4元起</div>
                                <button class="ljcz">立即充值</button>
                            </div>      
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-back">
            <div class="tubiao">
                <a class="tu">
                    <img src="images/10.png" alt=""><br>
                    1小时快修服务
                </a>
                <a class="tu">
                    <img src="images/11.png" alt=""><br>
                    7天无理由退货
                </a>
                <a class="tu">
                    <img src="images/12.png" alt=""><br>
                    15天免费换货
                </a>
                <a class="tu">
                    <img src="images/13.png" alt=""><br>
                    满150元包邮
                </a>
                <a class="tu">
                    <img src="images/14.png" alt=""><br>
                    520余家售后网点
                </a>
            </div>
            <div class="help">
                <div class="help-center01">
                    <span class="span01">帮助中心</span>
                    <a href="">购物指南</a>
                    <a href="">支付方式</a>
                    <a href="">配送方式</a>
                </div>
                <div class="help-center">
                    <span>服务支持</span>
                    <a href="">售后政策</a>
                    <a href="">自助服务</a>
                    <a href="">相关下载</a>
                </div>
                <div class="help-center">
                    <span>小米之家</span>
                    <a href="">小米之家</a>
                    <a href="">服务网站</a>
                    <a href="">预约亲临到店服务</a>
                </div>
                <div class="help-center">
                    <span>关于小米</span>
                    <a href="">了解小米</a>
                    <a href="">加入小米</a>
                    <a href="">联系我们</a>
                </div>
                <div class="help-center">
                    <span>关注我们</span>
                    <a href="">新浪微博</a>
                    <a href="">小米部落</a>
                    <a href="">官方微店</a>
                </div>
                <div class="tel">
                    <span class="telephone">
                        400-100-5678
                    </span><br>
                    <span class="teltime">
                        周一至周日8:00-18:00   
                    </span><br>
                    <span class="sf">（仅收市话费）</span><br>
                    <button class="kefu">
                        24小时在线客服
                    </button>
                </div>
            </div>
            <div class="footer">
                <div class="website">
                    <span class="web">小米旗下网站：</span>
                    <a href="">小米网</a><span>|</span>
                    <a href="">MIUI</a><span>|</span>
                    <a href="">米聊</a><span>|</span>
                    <a href="">多看书城</a><span>|</span>
                    <a href="">小米路由器</a><span>|</span>
                    <a href="">繁体香港</a><span>|</span>
                    <a href="">繁体台湾</a><span>|</span>
                    <a href="">English</a><span>|</span>
                    <a href="">小米后院</a><span>|</span>
                    <a href="">小米天猫店</a><span>|</span>
                    <a href="">小米淘宝直营店</a><span>|</span>
                    <a href="">小米网盟</a><span>|</span><br>   
                    <span class="web">©mi.com京ICP证110507号 京ICP备10046444号 京公安网备1101080212535号 京网文[2014]0059-0009号</span>
                </div>
                <div class="language">
                    <div class="picture"><img src="images/16.png" alt=""></div>
                    <select>
                        <option value="" selected>简体中文</option>
                        <option value="">繁体香港</option>
                        <option value="">繁体台湾</option>
                        <option value="">English</option>
                    </select>
                </div>
            </div>
        </div>

    </div>
</body>
</html>